import React, { useEffect, useState } from 'react';
import { Divider, Radio, Pagination, Table } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import * as APi from "../utils/GetData"
// import Item from 'antd/es/list/Item';
// interface DataType {
//   address: string;
//   address_detail: string;
//   category: "战略合作" | string; // 如果只有几种固定分类，可以用联合类型
//   code: string;
//   credit: number;
//   department: string;
//   id: number;
//   label: string; // 如果知道可能的 label 值，可以改为联合类型如 "KA" | "KB" | ...
//   name: string;
//   responsibility: string;
//   settlement: "季结" | string; // 如果知道所有结算周期类型，可以用联合类型
//   source: "销售自拓" | string; // 同上
//   sub_name: string;
//   sub_time: number; // 如果是时间戳，可以考虑使用 Date 类型
//   up_time: number; // 同上
// }



// rowSelection object indicates the need for row selection
const rowSelection: TableProps<DataType>['rowSelection'] = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },

};

const App: React.FC = () => {
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');

  const columns = [
    {
      title: '客户名称',
      dataIndex: ['custom', 'name'],
      width: 120,
    },
    {
      title: '客户编码',
      dataIndex: ['custom', 'code'],
      width: 100,
    },
    {
      title: '客户联系人姓名',
      dataIndex: 'contacts_name',
      width: 120,
    },
    {
      title: '客户联系人手机号',
      dataIndex: 'contacts_phone',
      width: 130,
    },
    {
      title: '销售订单名称',
      dataIndex: 'department',
      width: 140,
    },
    {
      title: '订单签订日期',
      dataIndex: 'up_time',
      width: 120,
    },
    {
      title: '订单交付日期',
      dataIndex: 'up_time',
      width: 120,
    },
    {
      title: '销售负责人',
      dataIndex: ['custom', 'responsibility'],
      width: 100,
    },
    {
      title: '销售归属部门',
      dataIndex: 'department',
      width: 120,
    },
    {
      title: '销售订单编号',
      dataIndex: ['custom', 'id'],
      width: 140,
    },
    {
      title: '出库仓库',
      dataIndex: 'warehouse',
      width: 140,
    },
    {
      title: '提交人',
      dataIndex: 'sub_name',
      width: 140,
    },
    {
      title: '提交时间',
      dataIndex: 'sub_time',
      width: 140,
    },
    {
      title: '更新时间',
      dataIndex: 'sub_time',
      width: 140,
    },
  ];


  const [data, setData] = useState([])

  useEffect(() => {
    APi.SaleData().then((res) => {
      console.log(res.data)
      setData(res.data)
    })
  }, [])
  return (
    <div>

      <Divider />

      <Table<DataType>
        rowSelection={{ type: selectionType, ...rowSelection }}
        columns={columns}
        dataSource={data}
        style={{ maxWidth: "100%" }}

        scroll={{ x: 'max-content' }}

      />

    </div>
  );
};

export default App;